<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<style>
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar">
    <table>
        <tbody><tr>
            <td>Brightness</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: brightness, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: brightness">
            </td>
        </tr>
        <tr>
            <td>Contrast</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: contrast, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: contrast">
            </td>
        </tr>
        <tr>
            <td>Hue</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: hue, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: hue">
            </td>
        </tr>
        <tr>
            <td>Saturation</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: saturation, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: saturation">
            </td>
        </tr>
        <tr>
            <td>Gamma</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: gamma, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: gamma">
            </td>
        </tr>
        <tr>
            <td>Alpha</td>
            <td>
                <input type="range" min="0" max="1" step="0.02" data-bind="value: alpha, valueUpdate: 'input'">
                <input type="text" size="1" data-bind="value: alpha">
            </td>
        </tr>
        </tbody></table>
</div>

<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');
    var imageryLayers = viewer.imageryLayers;

    // The viewModel tracks the state of our mini application.
    var viewModel = {
        brightness: 0,
        contrast: 0,
        hue: 0,
        saturation: 0,
        gamma: 0,
        alpha:1
    };
    // Convert the viewModel members into knockout observables.
    Cesium.knockout.track(viewModel);

    // Bind the viewModel to the DOM elements of the UI that call for it.
    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);

    // Make the active imagery layer a subscriber of the viewModel.
    function subscribeLayerParameter(name) {
        Cesium.knockout.getObservable(viewModel, name).subscribe(
                function(newValue) {
                    if (imageryLayers.length > 0) {
                        var layer = imageryLayers.get(0);
                        layer[name] = newValue;
                    }
                }
        );
    }
    subscribeLayerParameter('brightness');
    subscribeLayerParameter('contrast');
    subscribeLayerParameter('hue');
    subscribeLayerParameter('saturation');
    subscribeLayerParameter('gamma');
    subscribeLayerParameter('alpha');

    // Make the viewModel react to base layer changes.
    function updateViewModel() {
        if (imageryLayers.length > 0) {
            var layer = imageryLayers.get(0);
            viewModel.brightness = layer.brightness;
            viewModel.contrast = layer.contrast;
            viewModel.hue = layer.hue;
            viewModel.saturation = layer.saturation;
            viewModel.gamma = layer.gamma;
        }
    }
    imageryLayers.layerAdded.addEventListener(updateViewModel);
    imageryLayers.layerRemoved.addEventListener(updateViewModel);
    imageryLayers.layerMoved.addEventListener(updateViewModel);
    updateViewModel();

</script>
</body>

</html>